<template>
    <div class="ordering">
        <div>
        <el-page-header>
            <template #breadcrumb>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'adminhome' }">
                        管理员主页
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>班级信息管理</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </el-page-header>
    </div><br/>
        <div class="heading">学生信息展示</div>
        <el-divider />
        <div>
            <el-table :data="classData" style="width: 100%" height="350">
                <el-table-column prop="classId" label="班级编号" min-width="100" />
                <el-table-column prop="className" label="班级" min-width="100" />
                <el-table-column prop="classMajorName" label="专业" min-width="100" />
                <el-table-column prop="classGraduateDate" label="毕业年份" min-width="100" :formatter="formatDate" />
                <!-- <el-table-column align="center" fixed="right" label="管理" width="120">
                        <template #default="scope">
                            <el-button link type="danger" size="small" >删除</el-button>
                        </template>
                    </el-table-column> -->
            </el-table>
            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="班级信息文件档案上传" name="first">
                        <el-upload class="upload-demo" drag action="http://localhost:8080/excel/import_Class"
                            :show-file-list="false" multiple :on-success="uploadFileHandler"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!--     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="上传提示" name="second">
                        <el-text class="mx-1" size="large">
                            1. 文件的上传应选择excel表格形式，表格列应与要求中一致；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 表格上传一次最多上传一个文件，后文件会覆盖前文件的内容，请谨慎上传；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            3. 请认真核对表格信息后上传，上传后只能覆盖不能修改信息。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="third">
                        <el-text class="mx-1" size="large">
                            1. 系统加载缓慢，上传后展示列表不显示信息。
                            解决方案： 请尽快联系维护员。
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 文件上传失败的可能性
                            文件过大或者文件的格式不对。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="系统维护员联系" name="fourth">
                        <el-descriptions title="维护员">
                            <el-descriptions-item label="姓名：">殷凡卓</el-descriptions-item>
                            <el-descriptions-item label="联系电话：">18100000000</el-descriptions-item>
                            <el-descriptions-item label="办公地址：">中原校区 基础实验楼102</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, onBeforeMount, toRefs,onBeforeUnmount,reactive } from 'vue'
import requests from '@/api/ajax.js'
import { genFileId } from 'element-plus'

  
const token =ref({
    token:''
});
token.value.token=localStorage.getItem('user') // 替换为自己的 token
//console.log("++"+token.value);
// token.value = 'Bearer'+ token .value;

/* const url1 = "http://localhost:8080/excel/import_PracticeCourse/test?token=" + token.value
console.log("++" + url1)
 */

/* console.log(token); */
const classData = ref([{

}])

onBeforeMount(() => {

    const getClass = requests({ url: "/excel/allClass", method: "get", }).then(res => {
        if(res.code === 20041){
            classData.value = res.rdata
        }else{
            classData.value = null
        }
    })
        .catch(err => {
            console.error(err);
        });
})
function uploadFileHandler(res) {
    setTimeout(() => {
        if (loadingInstance.value !== null) {
            loadingInstance.value.close();
            loadingInstance.value = null;
        }
        if (res.code == 20010) {
            ElMessage.error(res.msg)
        } else {
            ElMessage.success(res.msg)
        }

    }, 1000);
}
function uploadFileErrorHandler(res) {
    ElMessage.error("上传失败,请检查网络连接")
    if (loadingInstance.value !== null) {
            loadingInstance.value.close();
            loadingInstance.value = null;
        }
}

const loadingInstance = ref(null);

function fullScreenLoading() {
    loadingInstance.value = ElLoading.service({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });

}
function uploadFileOnProgressHandler(res) {
    // this.$message("上传中...")
    fullScreenLoading()
}



//时间格式化
function formatDate(row, column, cellValue, index) {
    let format = 'YYYY-mm-dd'
    let date = new Date(cellValue);
    const dataItem = {
        'Y+': date.getFullYear().toString(),
        'm+': (date.getMonth() + 1).toString(),
        'd+': date.getDate().toString(),
    }
    Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
            format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
        }
    });
    return format
}
</script>

<style scoped>
.upload-demo {
    margin-top: 20px;
    background-color: #eee;
    padding: 20px;
    border-radius: 8px;
}
.file {
    position: relative;
    display: inline-block;
    background: #133d63;
    border: 0.1rem solid #99d3f5;
    border-radius: 0.2rem;
    padding: 0.2rem 0.6rem;
    overflow: hidden;
    color: #f0faff;
    text-decoration: none;
    text-indent: 0;
    line-height: 1.5rem;
    font-size: 0.8rem;
    margin-left: 7rem;
}

.file input {
    position: absolute;
    font-size: 0.8rem;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
}
</style>





<!-- <script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax.js'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile, TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}



const tableData = ref([{
    stuId: '',
    stuName: '',
    stuSex: '',
    className: '',
    stuIdentity: '',
    stuCollege: '',
    stuPhone: '',
    attendedDate: '',
}])

onBeforeMount(() => {

    //请求学生信息
    const aacom = requests({ url: "/outer/campany", method: "get", }).then(res => {
        //存储信息到浏览器toke
        const abc = res.data
        tableData.value = abc
        console.log(res)
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });
})



const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)

}

const submitUpload = () => {
    upload.value!.submit()
}
const handleBeforeUpload = (file) => {

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.withCredentials = true; // 设置允许跨域传输 cookie 等凭据
}

</script>


<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style> -->